<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">报警规则列表</span><router-link class="btn btn-xs btn-toinstlist "  :to="'/sites/index/'"> 返回站点监控列表</router-link></h5>
                    <div class="stayRight ">
                        <el-button @click="getList(1, 10)" icon="star-off">刷新</el-button>
                    </div>
                </div>
            </section>
            <section class="ruleMain">
                <div class="ruleTab">
                    <template>
                        <el-tabs v-model="activeName2" type="card">
                            <el-tab-pane label="报警规则" name="first">
                                <div class="ruletable">
                                    <el-table :data="ruleList"  border style="width: 100%" @selection-change="ruleSelectionChange">
                                        <el-table-column type="selection" width="55"></el-table-column>
                                        <el-table-column prop="siteName" label="站点名称" > </el-table-column>
                                        <el-table-column prop="name" label="监控项" > </el-table-column>
                                        <el-table-column prop="remark" label="规则描述" > </el-table-column>
                                        <el-table-column prop="status" label="状态" >
                                        <template scope="scope">
				                    		<el-tag size="small" :type="scope.row.status === '正常' ? 'success' : scope.row.status === '异常' ? 'danger' : 'info'" close-transition>{{scope.row.status}}</el-tag>
				                    	</template> 
                                        </el-table-column>
                                        <el-table-column prop="isStart" label="规则是否启用" > </el-table-column>
                                        <el-table-column label="操作">
                                            <template scope="scope">
                                                <el-button  size="small"  type="text"   @click="showRulelist(scope.$index, ruleList)">修改 | </el-button>
                                                <el-button  size="small"  type="text" v-if="scope.row.isStart === '启用'"   @click="disabledRule(scope.$index, ruleList)">禁用  | </el-button>
                                                <el-button  size="small"  type="text" v-if="scope.row.isStart === '禁止'"   @click="abledRule(scope.$index, ruleList)">启用  | </el-button>
                                                <el-button  size="small"  type="text"   @click="delRule(scope.$index, ruleList)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </div>
                 <div class="rulebottom">
                   <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <el-button  size="small"   @click="disabledRuleAll()" :disabled="rdisabled">禁用</el-button>
                    <el-button  size="small"  @click="abledRuleAll()" :disabled="rdisabled">启用</el-button>
                    <el-button  size="small"   @click="delRuleAll()" :disabled="rdisabled">删除</el-button>
                </div>

            </section>

            <!-- 规则 -->
            <el-dialog title="批量设置报警规则" :visible.sync="createRule" class="customDialog team" :lock-scroll="false">
                <div class="dialogmain">
                    <h6>您正在对站点 "{{detailTitle}}" 进行报警规则设置：</h6>
                    <div class="ruleditailMain">
                        <ul>
                            <li v-for="(item,index) in ruleEditList" :key="index">
                                 <div class="liChild listatus" v-if="item.checkType === 'code' && item.confType !== 'PING'"><el-checkbox v-model="cccode" @change="check(item.checkType)">状态码</el-checkbox>  </div>
                                 <div class="liChild listatus" v-if="item.checkType === 'code' && item.confType === 'PING'"><el-checkbox v-model="cccode" @change="check(item.checkType)">丢包率</el-checkbox>  </div>
                                 <div class="liChild listatus" v-if="item.checkType === 'rptime'" ><el-checkbox v-model="cctime" @change="check(item.checkType)">响应时间（毫秒）</el-checkbox> </div>
                                 <div class="liChild lichose">
                                    <template>
                                        <el-select v-model="item.rule " clearable placeholder="请选择">
                                            <el-option v-for="item in creatoptions" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                 </div>
                                 <div class="liChild litips">
                                    <el-tooltip content="状态码为大于0的整数" placement="top" effect="light">
                                        <el-input v-model="item.ruleValue" placeholder="阈值仅支持输入数字" ></el-input>
                                    </el-tooltip>
                                 </div>
                                 <div class="liChild rulename">
                                    <label > 规则名称:</label>
                                    <el-input v-model="item.ruleName" class="naipt"></el-input>
                                 </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="createRule = false">取 消</el-button>
                    <el-button type="primary" @click="setRule" :disabled="istoTwo">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { querySiteRuleList, modifySiteRule, roleList, enabledRule, resumeRule, deleteBatchSiteRule } from '@/api/getData'

export default {
  data() {
    return {
      activeName2: 'first',
      createRule: false,
      stepTwoRule: false,
      listLoading: true,
      rdisabled: true,
      dataType: '',
      choseItem: [],
      cccode: false,
      cctime: false,
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      detailTitle: '',
      threshold: '',
      ruleList: [],
      ruleEditList: [],
      role: [],
      istoTwo: true,
      multipleSelection: [],
      creatoptions: [{
        value: '>=',
        label: '>='
      }, {
        value: '<',
        label: '<'
      }, {
        value: '>',
        label: '>'
      }, {
        value: '<=',
        label: '<='
      }, {
        value: '=',
        label: '='
      }, {
        value: '!=',
        label: '!='
      }],
      rpTime: true,
      rpTimeRule: '',
      rpTimeValue: '',
      rpTimeName: '',
      code: true,
      codeRule: '',
      codeValue: '',
      codeName: '',
      ruleStepForm: {
        siteId: '',
        number: '',
        roleIds: '',
        rpTime: true,
        rpTimeRule: '',
        rpTimeValue: '',
        rpTimeName: '',
        code: true,
        codeRule: '',
        codeValue: '',
        ttUser: [],
        codeName: ''
      },
      rules: {
        ttUser: [
          { type: 'array', required: true, message: '联系人通知组', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList(1, 10)
  },
  methods: {
    getList(page, size) {
      this.listLoading = true
      const allRule = {
        currPage: page,
        pageSize: size
      }
      querySiteRuleList(allRule).then(response => {
        this.ruleList = response.data.data
        this.ruleEditList = response.data.data
        this.totalSize = response.data.totalRows
        this.currentPage = page
        this.pagesz = size
        if (this.ruleList !== undefined) {
          this.ruleList.forEach(function(element) {
            if (element.isStart === 0) {
              element.isStart = '启用'
            } else {
              element.isStart = '禁止'
            }
            if (element.status === 0) {
              element.status = '正常'
            } else {
              element.status = '异常'
            }
          }, this)
        }
        this.dataType = response.data.type
        this.listLoading = false
      })
      roleList().then(response => {
        this.role = response.data
      })
    },
    showRulelist(index, data) {
      this.createRule = true
      this.ruleEditList = []
      this.ruleEditList.push(data[index])
      if (data[index].checkType === 'rptime') {
        this.cctime = true
      } else {
        this.cccode = true
      }
      this.istoTwo = false
      this.detailTitle = data[index].siteName
    },
    toSteptwo() {
      this.createRule = false
      this.stepTwoRule = true
    },
    setRule() {
      const _this = this
      this.ruleStepForm.siteId = this.$route.params.rid
      if (this.rpTime === true) {
        this.rpTime = 0
      } else {
        this.rpTime = 1
      }
      if (this.code === true) {
        this.code = 0
      } else {
        this.code = 1
      }
      this.ruleEditList.forEach(function(element) {
        this.ruleStepForm.siteId = element.siteId
        if (this.cccode === true) {
          _this.ruleStepForm.code = 0
        } else {
          _this.ruleStepForm.code = 1
        }
        if (this.cctime === true) {
          _this.ruleStepForm.rpTime = 0
        } else {
          _this.ruleStepForm.rpTime = 1
        }
        if (element.checkType === 'code') {
          _this.ruleStepForm.codeName = element.ruleName
          _this.ruleStepForm.codeRule = element.rule
          _this.ruleStepForm.codeValue = element.ruleValue
        } else {
          _this.ruleStepForm.rpTimeName = element.ruleName
          _this.ruleStepForm.rpTimeRule = element.rule
          _this.ruleStepForm.rpTimeValue = element.ruleValue
        }
      }, this)
    //   console.log(this.ruleStepForm, 'ruleStepForm')
      // this.ruleStepForm.roleIds = this.ruleStepForm.ttUser.join(',')
      modifySiteRule(this.ruleStepForm).then(response => {
        console.log(response, 'response')
        this.dataArr = response.data.data
        this.listLoading = false
        this.createRule = false
        this.getList()
      })
    },
    check(type) {
      if (type === 'code') {
        this.cccode = event.target.checked
        if (this.cccode) {
          this.istoTwo = false
        } else {
          this.istoTwo = true
        }
      } else {
        this.cctime = event.target.checked
        if (this.cctime) {
          this.istoTwo = false
        } else {
          this.istoTwo = true
        }
      }
    },
    handleSizeChange(val) {
      this.getList(1, val)
    },
    handleCurrentChange(val) {
      console.log(val, 'changesize')
      this.getList(val, 10)
    },
    disabledRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('确定禁用该规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        enabledRule(sel).then(response => {
          // console.log(response, 'response')
          this.dataArr = response.data.data
          this.getList()
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    abledRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('确定启用该规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        resumeRule(sel).then(response => {
          console.log(response, 'response')
          this.dataArr = response.data.data
          this.getList()
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    delRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('此操作将删除该数据, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatchSiteRule(sel).then(response => {
          this.dataArr = response.data.data
          this.getList(1, 10)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    },
    ruleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.rdisabled = false
      } else {
        this.rdisabled = true
      }
    },
    disabledRuleAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定禁用选中的规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        enabledRule(obj).then(response => {
          // console.log(response, 'response')
          this.dataArr = response.data.data
          this.getList(1, 10)
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    abledRuleAll() {
      const idQuery = []
      // console.log(this.multipleSelection, 'multipleSelection')
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定启用选中的规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        resumeRule(obj).then(response => {
          this.dataArr = response.data.data
          this.getList(1, 10)
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    delRuleAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定要删除选中的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatchSiteRule(obj).then(response => {
          this.dataArr = response.data.data
          this.getList(1, 10)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss">
ul,li{
    padding: 0;
    margin: 0;
    list-style:none ;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
        }
    }
}

.btn-toinstlist{
  border: 1px solid #BBB;
  color: #666;
  text-shadow: none;
  vertical-align: middle;
  margin-top: 7px;
}
.ruleMain{
    padding:0 10px;

}
.rulebottom{
    margin-top: 10px;
    .pullright{
        float: right;
    }
}
.el-dialog__header{
    padding: 20px!important;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title{
        font-weight: 100;
    }
}
.el-dialog__body{
    padding: 10px 20px 30px;
    .el-checkbox-group{
        border: 1px solid #eee;
        height: 280px;
        padding: 10px 0;
        label:first-child{
            margin-left: 15px;
        }
    }
}
.ruleStepForm{
    margin-top: 20px
}
.console-step{
    height: 24px;
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    .step{
        width: 33%;
        float: left;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        color: #FFF;
        background: #cacaca;
        z-index: 1;
        text-align: center;
        position: relative;
        &:after{
            content: '';
            display: block;
            width: 16px;
            height: 24px;
            position: absolute;
            right: 0px;
            z-index: 9;
            top: 0px;
            border-top: 12px solid transparent !important;
            border-left: 12px solid #cacaca;
            border-bottom: 12px solid transparent !important;
            background-color: #FFF;
        }
    }
    .step-active{
        background-color: #00a0c7;
        &:after{
            border-color: #00a0c7;
        }
    }
}
.ruleditailMain{
    li{
        overflow: hidden;
        margin-bottom: 10px;
        .liChild{
            display: inline-block;
            margin-right: 10px;
        }
        .listatus{
            width: 110px;
            span{
            font-size: 12px;
            font-weight: 100;
            }
        }
        .lichose{
            width: 100px;
        }
        .litips{
            width: 150px;
        }
        .rulename{
            label{
                display: inline-block;
                font-weight: 100;
            }
            .naipt{
                width: 150px
            }
        }
    }
}


</style>


